<template>
  <div>
    <van-nav-bar class="page-nav-bar" title="个人信息" left-arrow @click-left="$router.go(-1)" />
    <van-cell center title="头像" @click="imgfunc">
      <input type="file" hidden name="file" id="file" ref="file" @change="imgChange" />
      <div slot="right-icon" style="display:flex;align-items:center">
        <van-image round width="1rem" height="1rem" :src="userInfo.photo" />
        <van-icon name="arrow" />
      </div>
    </van-cell>
    <van-cell title="昵称" is-link :value="userInfo.name" @click="showNamePopup" />
    <van-cell title="性别" is-link :value="userInfo.gender?'女':'男'" @click="showSexPopup" />
    <van-cell title="生日" is-link :value="userInfo.birthday" @click="showDatePopup" />
    <!-- 编辑用户名弹出层 -->
    <van-popup
      v-model="showName"
      position="bottom"
      :style="{ height: '100%',backgroundColor:'#f5f7f9' }"
    >
      <nickname @nickfunc="nickfunc"></nickname>
    </van-popup>
    <!-- 编辑性别弹出层 -->
    <van-popup v-model="showSex" position="bottom" :style="{ height: '40%' }">
      <gender @genderfunc="genderfunc"></gender>
    </van-popup>
    <!-- 编辑日期弹出层 -->
    <van-popup v-model="showDate" position="bottom" :style="{ height: '40%' }">
      <birth @birthfunc="birthfunc "></birth>
    </van-popup>
    <!-- 编辑图片弹出层 -->
    <van-popup
      v-model="showImg"
      position="bottom"
      :style="{ height: '100%' ,backgroundColor:'#1e1e1e'}"
    >
      <photo :url="userInfo.photo" @imgFunc="showImg = false"></photo>
    </van-popup>
  </div>
</template>
<script>
import nickname from "./components/nickname";
import gender from "./components/gender";
import birth from "./components/birth";
import photo from "./components/photo";
import { getUserinfo_api } from "../../api/user.js";
export default {
  data() {
    return {
      // show: false,
      showName: false,
      // nickname: "",
      showSex: false,
      showDate: false,
      showImg: false,
      userInfo: {},
    };
  },
  created() {
    this.getUserinfo();
  },
  methods: {
    async getUserinfo() {
      const { data: res } = await getUserinfo_api();
      // console.log(res);
      this.userInfo = res.data;
    },
    // 图片上传
    imgfunc() {
      this.$refs.file.click();
    },
    // 编辑头像
    imgChange() {
      var files = this.$refs.file.files[0];
      var url = URL.createObjectURL(files);
      this.userInfo.photo = url;
      // 显示图片弹出层
      this.showImg = true;
    },
    // imgFunc(photo) {
    // this.showImg = false;
    // this.userInfo.photo = photo;
    // },

    //   显示姓名弹出层
    showNamePopup() {
      this.showName = true;

      // this.nickname = name;
    },
    nickfunc(name) {
      this.showName = false;
      this.userInfo.name = name;
    },
    genderfunc(gender) {
      console.log(gender, "0000");
      this.showSex = false;
      if (gender) {
        this.userInfo.gender = 1;
      } else {
        this.userInfo.gender = 0;
      }
    },
    // 显示性别弹出层
    showSexPopup() {
      this.showSex = true;
    },

    // 显示日期弹出层
    showDatePopup() {
      this.showDate = true;
    },
    birthfunc(birth) {
      this.showDate = false;
      this.userInfo.birthday = birth;
    },
  },
  components: {
    nickname,
    gender,
    birth,
    photo,
  },
};
</script>
<style lang='less' scoped>
/deep/.van-nav-bar {
  .van-nav-bar__left {
    .van-icon-arrow-left {
      color: #fff;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>